<template>
	<view class="complaintPage">
		<template v-if="notice">
			<view class="noticeHeader">民营经济投诉服务中心</view>
			<view class="notice">第一条　为维护民营企业的合法权益，优化政务环境，加快民营经济发展，根据《决定》的规定，制定本办法。

				第二条　在本市注册的民营企业、个体工商户，当其合法权益受到本市行政机关行政行为侵害时，可按本办法进行投诉。
				第三条　设立民营经济投诉服务中心，投诉中心设在市中小企业局。
				第四条　民营经济投诉服务中心受理投诉一律不收费。
				第五条　市民营企业维权投诉中心负责履行以下职能：
				（一）受理民营企业、个体工商户对各企业部门的投诉，提出意见移交有关部门处理。
				（二）督促企业有关部门及其他具有行政管理职能的组织对投诉事项进行调查处理。
				（三）定期向市委、市政府汇报投诉事项及办理情况，并根据情况适时向社会公布。
				（四）分析民营企业投诉中涉及的政策性和普遍性问题，进一步改善民营经济发展环境的意见和建议。
				（五）指导区县（自治县、市）民营企业维权投诉中心的业务工作。
				（六）承办市委、市政府交办的其他工作。
				第六条　民营企业、个体工商户可采取面谈、信函、传真、电话和上网等方式投诉，投诉内容应包括：投诉人、投诉对象、投诉事由、
				投诉人或代理人的通讯地址和联系方式等。
				第七条　投诉中心对投诉人的投诉事项必须作好登记，并在5个工作日内将处理情况回复投诉人。
				第八条　投诉中心对已受理的投诉事项，分下列情况处理：
				（一）对事实清楚，情节简单，且涉及到行政机关的投诉事项，由投诉中心转交相关部门在7个工作日内办理完毕。
				（二）对须转交有关行政机关进一步调查、研究、处理的投诉事项，由投诉中心3个工作日内提出意见移交有关行政机关处理，承办
				行政机关应在20个工作日内办理完毕。
				（三）涉及两个以上行政机关的投诉事项，由投诉中心指定其中一个行政机关负责牵头处理，相关行政机关协办。
				（四）对重大复杂的投诉事项，由投诉中心组织有关行政机关共同处理。
				第九条　如投诉人对有关行政机关的答复不满意，并提出了较充分的证据和理由的，由投诉中心责成有关
				行政机关重新调查处理或解释说明。
				第十条　投诉事项有下列情况之一者，可以终结：
				（一）经投诉中心或有关行政机关协调，争议双方当事人达成一致意见，纠纷得到解决的；
				（二）在受理投诉过程中，投诉人就投诉事项申请仲裁、行政复议或向人民法院提起诉讼的；
				（三）投诉人自愿放弃投诉的；
				（四）投诉人无故不参加协调活动或拒绝与投诉中心联系、配合的；
				（五）投诉事项有其他终结情形的。
				第十一条　投诉中心负责查询和督促投诉案件的办理。有关承办部门对投诉中心交办的投诉事项必须及时办理。超过督办期限不答复
				投诉人的，由投诉中心向市委、市政府作专题汇报，提出给予直接责任人员及分管领导纪律处分的建议。
				第十二条　被投诉部门及其工作人员威胁、压制、刁难、诽谤、打击报复投诉人的，由监察机关查处，构成犯罪的，由司法机关依法
				追究刑事责任。
				第十三条　投诉中心的工作人员和有关承办部门的工作人员在办理投诉事项中，弄虚作假、拖延推诿、玩忽职守、徇私舞弊、
				滥用职权、索取或者收受贿赂、敲诈勒索的，由监察机关或者有关行政机关追究行政责任；构成犯罪的，依法追究刑事责任。
				第十四条　本规定施行中的具体问题由市中小企业局负责解释。
				第十五条　各企业可参照执行本规定，并可根据本规定，结合本区域实际，制定实施细则。
				第十六条　本规定自2022年10月1日起施行。</view>
			<button class="see" :class="time ?'noSee':''" @tap.stop="notice = false">
				{{time ? '请阅读投诉受理须知('+time+')s' : '已阅读'}}</button>
		</template>

		<!-- 当用户阅读了投诉受理通知后，才显示表单投诉内容信息 -->
		<template v-else>
			<form class="enterpriseForm">
				<label class="label header">企业信息</label>
				<label class="label">
					<view class="title">企业名称</view>
					<view class="content">{{useInfo.name}}</view>
				</label>
				<label class="label">
					<view class="title">社会统一信用代码</view>
					<view class="content">{{useInfo.code}}</view>
				</label>

				<label class="label">
					<view class="title">企业类型</view>
					<view class="content">{{useInfo.type}}</view>
				</label>

				<label class="label">
					<view class="title">联系电话</view>
					<view class="content">{{useInfo.phone}}</view>
				</label>

				<label class="label">
					<view class="title">联系地址</view>
					<view class="content">{{useInfo.address}}</view>
				</label>
			</form>

			<form class="enterpriseForm">
				<label class="label header">法人信息</label>
				<label class="label">
					<view class="title">姓名</view>
					<view class="content">广西昊华科技股份有限公司</view>
				</label>

				<label class="label">
					<view class="title">身份证号</view>
					<view class="content">45222*********2577</view>
				</label>
			</form>

			<form class="form">
				<label class="label header">投诉信息</label>
				<label class="label">
					<view class="title"><text class="tips">*</text>投诉标题</view>
					<input class="ipt" type="text" v-model="info.name" placeholder="请输入内容" />
					<view class="clear" v-if="info.name" @tap.stop="info.name = ''">&#xe609;</view>
				</label>

				<label class="label">
					<view class="title"><text class="tips">*</text>投诉类型</view>
					<picker class="picker" @change="pickerChange" :value="index" :range="pickerList">
						<view class="pickerV">
							<view>{{pickerList[index]}}</view>
							<view class="arrow">&#xe62d;</view>
						</view>
					</picker>
				</label>

				<label class="textareaLabel">
					<view class="title"><text class="tips">*</text>投诉内容</view>
					<textarea class="textarea" maxlength="-1" v-model="info.content"
						placeholder="请填写事发时间、事发地点、涉事对象、事件经过、具体诉求" />
					<view class="clear" v-if="info.content" @tap.stop="info.content = ''">&#xe609;</view>
				</label>

				<label class="name">
					<view class="title"><text class="tips">*</text>上传资料</view>
					<view class="content">45222*********2577</view>
				</label>
			</form>

			<!-- 手签名 -->
			<view class="popup" v-if="popup">
				<view class="autograph">
					<view class="card">
						<view class="txt">手签确认</view>
						<view class="close" @tap.stop="close">&#xeca0;</view>
					</view>
					<canvas disable-scroll="true" :style='"width:"+w+"px;height:"+h+"px;"' id="canvas"
						canvas-id="canvas" @touchstart="start" @touchend="end" @touchmove="move"></canvas>

					<button class="sucess" @tap.stop="sucess">确定</button>
					<button class="reset" @tap.stop="reset">清除</button>
				</view>
			</view>

			<button class="submit" @tap.stop="submit">提交</button>
		</template>
	</view>
</template>

<script setup lang="ts">
	import { onReady } from "@dcloudio/uni-app"
	import { reactive, ref, getCurrentInstance } from "vue"
	// 是否显示通知
	let notice = ref(false)
	// 倒计时的时间
	let time = ref(5)
	// 倒计时--
	// 当倒计时结束时显示已阅读了，此时可以点击按钮了，让表单内容显示了
	let id = setInterval(() => {
		time.value--
		if (time.value <= 0) {
			clearInterval(id)
		}
	}, 1 * 1000)
	// 倒计时==

	// 是否显示弹窗
	let popup = ref(false)

	// 用户选择的问题类型
	let pickerList = [
		"融资问题",
		"生产成本问题",
		"项目用地问题",
		"减税降费问题",
		"承诺兑现问题",
		"施欠款项问题",
		"政商关系问题",
		"其它问题",
	]
	// 选择了第几个的问题
	let index = ref('0');
	// 选择了后触发的事件
	let pickerChange = (e: any) => {
		index.value = e.detail.value
	}

	// 用户的企业信息、企业法人信息
	let useInfo = {
		name: "广西昊华科技股份有限公司",
		code: "GX65SDF555DGH8845SDFF",
		type: "民营企业",
		phone: "0771-5884488",
		address: "南宁市青秀区朱槿路10号新加坡园区星岛国际401号",
	}

	// 用户提交的投诉内容信息
	let info = reactive({
		name: "",
		content: "",
	})

	// 当用户不填写表单时提示的文本内容
	let infoTips = {
		"name": "请输入投诉内容",
		"content": "请输入投诉内容"
	}

	// 提交内容了吧
	let submit = () => {
		// 判断用户是否填写了表单内容
		for (let k in info) {
			let item = info[k]
			if (!item) return void(uni.showToast({
				title: infoTips[k],
				icon: "none",
				mask: true,
			}))
		}
		// 提交表单数据信息

		// 开始显示弹窗，让用户输入签名
		popup.value = true
	}

	// 手写签名的--
	// 不是响应式的变量了
	let ctx = null;
	// 是否正在画
	let isDrawing = ref(false)
	// 路径点集合	
	let points = reactive([])
	let w = 320
	let h = 300
	// 笔的粗细
	let lineWidth = 3

	// 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady(() => {
		ctx = uni.createCanvasContext("canvas")
		//设置画笔样式
		ctx.lineWidth = lineWidth;
		ctx.lineCap = "round"
		ctx.lineJoin = "round"
		ctx.fillStyle = "white"
		ctx.fillRect(0, 0, w, h)
	})

	let start = (e: any) => {
		isDrawing.value = true
		// 先初始化坐标
		let { x, y } = e?.touches[0]
		// 开始存点
		points.push({ x, y })
		// 每次都开启新的路径
		ctx.beginPath()
	}

	let move = (e: any) => {
		e.preventDefault()
		// 获取移动时的坐标
		let { x, y } = e?.touches[0]
		// 存点
		points.push({ x, y })

		// 开始画图
		// 1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
		// 2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
		// 3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
		let len = points.length
		if (len > 2) {
			let { x, y } = points[0]
			let { x: x1, y: y1 } = points[1]

			points.shift()
			ctx.moveTo(x, y)
			ctx.lineTo(x1, y1)

			ctx.stroke()
			ctx.draw(true)
		}

	}

	// 结束写签名
	let end = () => {
		// 将所有的点清空
		points.length = 0
		// 停止绘制
		isDrawing.value = false
	}

	// 确认
	let sucess = () => {
		// 请先完成签名
		if (isDrawing.value) return void(uni.showToast({
			title: '请先完成签名',
			icon: "none",
			duration: 1000,
			mask: true
		}))

		// 将canvas转为图片路径
		uni.canvasToTempFilePath({
			width: w,
			height: h,
			canvasId: "canvas",
			success(res) {
				//生成的图片路径
				console.log("生成的图片路径", res.tempFilePath)
			},
			fail(err) {
				console.log("发生错误了吧", err)
			}
		})
	}

	// 撤销
	let reset = () => {
		// 停止绘制
		isDrawing.value = false
		ctx.clearRect(0, 0, w, h)
		ctx.draw(true)

		// ctx = uni.createCanvasContext("canvas")

		// //设置画笔样式
		// ctx.lineWidth = 4;
		// ctx.lineCap = "round"
		// ctx.lineJoin = "round"
		// ctx.fillStyle = "white"
		// ctx.fillRect(0, 0, w, h)

	}

	let close = () => {
		popup.value = false
		// 停止绘制
		isDrawing.value = false
		ctx.clearRect(0, 0, w, h)
		ctx.draw(true)

		ctx = uni.createCanvasContext("canvas")

		//设置画笔样式
		ctx.lineWidth = lineWidth;
		ctx.lineCap = "round"
		ctx.lineJoin = "round"
		ctx.fillStyle = "white"
		ctx.fillRect(0, 0, w, h)
	}
	// 手写签名的==
</script>

<style lang="scss" scoped>
	.complaintPage {
		min-height: inherit;
		background-color: #f4f6f6;
		padding: 20px 10px 0;
		color: #fff;
		display: flex;
		flex-direction: column;
	}

	.noticeHeader {
		font-weight: bold;
		font-size: 32rpx;
		text-align: center;
		margin-bottom: 20rpx;
		color: #333;
	}

	.notice {
		color: #515254;
		white-space: pre-wrap;
	}

	// 是否阅读过--
	.see {
		height: 70rpx;
		line-height: 70rpx;
		color: #fff;
		border-radius: 40rpx !important;
		background-color: #3782FE;
		color: #ffffff;
		text-align: center;
		font-size: 24rpx;
		transition: all 0.3s;
		position: sticky;
		bottom: 20px;
	}

	.noSee {
		background-color: #999999 !important;
		pointer-events: none !important;
	}

	// 是否阅读过==

	// 头部标题
	.header {
		color: #3782fe;
		font-size: 34rpx;
		font-weight: bold;
		padding-left: 20rpx;
	}

	.form,
	.enterpriseForm {
		background-color: #ffffff;
		width: 100%;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		margin-bottom: 20px;
	}


	.label {
		height: 55px;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #f4f6f6;
	}

	.title {
		flex: 0 0 80px;
		padding: 0 8px;
		font-size: 28rpx;
		color: #848889;
	}

	.tips {
		vertical-align: middle;
		color: #fa3534;
	}

	.content {
		color: #333;
		height: 100%;
		display: flex;
		align-items: center;
		flex: 1;
		padding-right: 5px;
		font-size: 24rpx;
	}

	// 输入框
	.ipt {
		flex: 1 1 100%;
		height: 100%;
		display: flex;
		align-items: center;
		color: #333;
	}

	.picker {
		width: 100%;
		height: 100%;
		color: #333;
	}

	.pickerV {
		height: 55px;
		line-height: 55px;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.arrow {
		float: left;
		display: inline-block;
		color: #c0c4cc;
		font-family: "iconfont";
		margin-right: 20rpx;
	}

	.textareaLabel {
		height: 100px;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #f4f6f6;
	}

	// 多行文本的输入
	.textarea {
		color: #333;
		flex: 1 1 auto;
		height: 100px !important;
		padding: 5px 0;
	}

	.submit {
		height: 70rpx;
		line-height: 70rpx;
		background-color: #3782FE;
		border-radius: 20px !important;
		margin-bottom: 20px;
		color: #ffffff;
		font-size: 23rpx !important;
		font-weight: 500;
		text-align: center;
	}

	// 手写签名
	.popup {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.autograph {
		background-color: #f8f8f8;
		border-radius: 4px;
		padding: 10px 15px 20px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px 20px;
	}

	.card {
		grid-column: 1/-1;
		text-align: center;
		color: #979797;
		font-size: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 34px;
	}

	.txt {
		flex: 1 1 auto;
	}

	.close {
		font-family: "iconfont";
		width: 34px;
		height: 34px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#canvas {
		grid-column: 1/-1;
		background-color: #ececec;
		border-radius: 4px !important;
		overflow: hidden;
	}

	.reset,
	.sucess {
		height: 45px;
		line-height: 45px;
		border-radius: 8px !important;
		background-color: #007aff;
		color: #fff;
	}

	.reset {
		background-color: #fea500;
	}
</style>
